* {
	/* 初始化 取消页面的内外边距 */
	padding: 0;
	margin: 0;
}
body {
	/* 弹性布局 让页面元素水平+垂直居中 */
	display: flex;
	justify-content: center;
	align-items: center;
	/* 让页面始终占浏览器总高 */
	height: 100vh;
	background-color: #000;
	/* 视距 让元素看起来更有3D效果 */
	perspective: 900px;
}
section {
	/* 相对定位 */
	position: relative;
	width: 300px;
	height: 200px;
	/* 鼠标放到元素上变成小手 */
	cursor: pointer;
	/* 让子元素保留其3D位置 */
	transform-style: preserve-3d;
	/* 动画 名称 时长 linear 是匀速 播放 infinite 是无限次播放 */
	animation: rotate 20s linear infinite;
}
section:hover {
	/* 鼠标放到元素上停止动画 */
	animation-play-state: paused;
}
section div {
	/* 绝对定位 */
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	/* 设置元素的倒影效果 below 是倒影效果在元素下方 15px 是元素和倒影的距离 后面的属性和背景渐变色是一个属性 设置了一个从下到上由背景透明色过渡到设置了不透明度的白色 */
	-webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 10%, rgba(255, 255, 255, 0.3));
}
section div:nth-child(1) {
	transform: translateZ(300px);
	background-color: #c14c39;
}
section div:nth-child(2) {
	transform: rotateY(60deg) translateZ(300px);
	background-color: #6e9c72;
}
section div:nth-child(3) {
	transform: rotateY(120deg) translateZ(300px);
	background-color: #5e5f7a;
}
section div:nth-child(4) {
	transform: rotateY(180deg) translateZ(300px);
	background-color: #f5eb98;
}
section div:nth-child(5) {
	transform: rotateY(240deg) translateZ(300px);
	background-color: #50a3bc;
}
section div:nth-child(6) {
	transform: rotateY(300deg) translateZ(300px);
	background-color: #f9a99a;
}
/* 先定义旋转动画 */
@keyframes rotate {
	0% {
		transform: rotateY(0);
	}
	100% {
		transform: rotateY(360deg);
	}
}
